<template>
  <q-dialog v-model="show" persistent>
    <q-card v-drag class="dialog-content" style="min-width: 1000px; max-height: 500px">
      <q-card-section class="dialog-title bg-primary" >
        <div class="text-center text-white dialog-title">
           <q-btn
              style="font-size: 18px;color: white"
              flat round dense
              class="iconfont icontubiao-67 white close-btn dialog"
              @click="$emit('close')"
            />
          <span class="font-size-16">
            绑定记录（每设备保存100条记录）
          </span>
        </div>
      </q-card-section>
      <div style="padding: 20px;position: relative;margin-bottom: 10px;height: 440px" class="page-content">
        <!-- 表格 -->
        <q-table
          class="users-table myTable scroll my-sticky-virt scroll-table"
          :columns="tableColumns"
          :data="tableData"
          row-key="id"
          :pagination.sync="pagination"
          no-data-label="暂无数据"
          color="primary"
          hide-bottom
          style="margin: 0 0 22px"
        >
          <template v-slot:body-cell-deviceId="props">
            <q-td :props="props">
              {{getDeviceName(props.row.deviceId)}}
            </q-td>
          </template>
          <template v-slot:body-cell-operationTime="props">
            <q-td :props="props">
              {{props.row.operationTime | toTime}}
            </q-td>
          </template>
          <template v-slot:body-cell-originalBinderName="props">
            <q-td :props="props">
              {{props.row.originalBinderName ? props.row.originalBinderName :'--'}}
            </q-td>
          </template>
          <template v-slot:body-cell-currentBinderName="props">
            <q-td :props="props">
              {{props.row.currentBinderName ? props.row.currentBinderName :'--'}}
            </q-td>
          </template>
        </q-table>
        <pagination
          v-model="pagination.page"
          :page-size="pagination.rowsPerPage"
          :total="pagination.rowsNumber"
          @changePageSize="onPageSizeChange"
          @changePage="onPageChange"
        />
        <!-- 表格End -->
      </div>
    </q-card>
  </q-dialog>
</template>

<script>
import Pagination from '../../../components/pagination/index'
import { getBindHistory } from '../../../boot/job/man-machine-bind'

export default {
  name: 'bund-history',
  props: {
    show: {
      type: Boolean,
      default: false,
      required: true
    },
    // 选中设备列表
    selected: {
      default: false,
      required: true
    },
    // 设备信息
    deviceDetail: {
      required: true
    },
    // 轮班列表
    shiftsList: {
      required: true
    }
  },
  components: {
    Pagination
  },
  data () {
    return {
      // 表格列
      tableColumns: [
        { name: 'deviceId', field: 'deviceId', label: '设备', align: 'left' },
        { name: 'operator', field: 'operator', label: '操作人', align: 'left' },
        { name: 'operationTime', field: 'operationTime', label: '操作时间', align: 'left' },
        { name: 'message', field: 'message', label: '操作', align: 'left' },
        { name: 'originalBinderName', field: 'originalBinderName', label: '原绑定人', align: 'left' },
        { name: 'currentBinderName', field: 'currentBinderName', label: '现绑定人', align: 'left' }
      ],
      pagination: {
        // 当前页码
        page: 1,
        // 每页条数
        rowsPerPage: 15,
        // 总条数
        rowsNumber: 0
      },
      tableData: []
    }
  },
  methods: {
    getBundHistoryList () {
      // let deviceIds = []

      // this.selected.forEach(i => {
      //   deviceIds.push(i.deviceId)
      // })
      console.log(this.selected[0].deviceId, 'lunban')

      let shiftsIds = []

      this.shiftsList.forEach(i => {
        if (i.value !== 'all') {
          shiftsIds.push(i.value)
        }
      })
      const params = {
        pageNum: this.pagination.page,
        pageSize: this.pagination.rowsPerPage,
        shiftsIds: shiftsIds,
        deviceId: this.selected[0].deviceId
      }
      getBindHistory(params).then(res => {
        this.pagination.rowsNumber = res.data.total
        this.tableData = res.data.list
      })
    },
    /**
     * on 分页组件的每页条数发生改变
     * @param val 每页条数
     */
    onPageSizeChange: function (val, page) {
      this.pagination.rowsPerPage = val
      page && (this.pagination.page = page)
      this.getBundHistoryList()
    },

    /**
     * on 分页组件的页码发生改变
     * @param val 页码
     */
    onPageChange: function (val) {
      this.pagination.page = val
      console.log('页码发生改变')
      this.getBundHistoryList()
    },
    // 获取设备名称，id
    getDeviceName (key) {
      // console.log(this.deviceDetail, 111111111)
      return this.deviceDetail[key].name + '(' + this.deviceDetail[key].id + ')'
    }
  },
  watch: {
    selected: function (newVal) {
      console.log(newVal)
      this.getBundHistoryList()
    }
  }
}
</script>

<style scoped lang="stylus">
  .font-size-16 {
    font-size 16px
  }
  .font-size-14 {
    font-size 14px
  }
  >>>.pagination .q-btn{
    min-height: 22px;
    height: 22px;
    line-height: 22px;
  }
</style>
